<template>
  <div class="city">
    <h2>省份列表</h2>
    <ul class="province2">
      <li
        v-for="(province, index) in provinces"
        :key="province.provinceName"
        @click="showCities(index)"
      >
        {{ province.provinceName }}
        <ul v-if="showCityList[index]" class="city-list">
          <li v-for="(city, index) in province.citys" :key="index" @click="showcityName(city)">
            {{ city.cityName }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

  <script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import areaData from '../../address/city.json'
import { useRouter } from 'vue-router'
const router = useRouter()
const provinces = ref(areaData.provinces)
const showCityList = ref<boolean[]>([])
for (let i = 0; i < provinces.value.length; i++) {
  showCityList.value.push(false)
}
const showCities = (index: number) => {
  showCityList.value[index] = !showCityList.value[index]
}
const showcityName = (city: any) => {
  localStorage.setItem('city', JSON.stringify(city))
  router.push('/index')
}
</script>
  <style lang="scss" scoped>
.city {
  font-size: 0.6rem;
  position: relative;
  // background: red;
  width: 100%;
  height: 100vh;
  font-size: 14px;
  overflow: auto;
  h2 {
    text-align: center;
  }
}

.province2 {
  width: 40%;
  position: absolute;
  top: 1.4rem;
  .city-list{
    position: fixed;
    overflow: auto;
    top: 50px;
    padding-bottom: 30px;
  }
}

.province2 li {
  padding-left: 20px;
  height: 1rem;
  line-height: 1rem;
  background: #f2f2f2;
  border-bottom: 1px solid #fff;
}

.city-list {
  background: #fff;
  position: absolute;
  top: 0rem;
  left: 5rem;
  width: 100%;
  height: 100vh;
  overflow: auto;

  li {
    background-color: #fff;
    width: 100%;
  }
}

.active {
  background-color: red
}

</style>